<template>
  <el-dialog v-model="dialog.visible" :title="dialog.title" width="50%" @close="handleCloseDialog">
    <div class="">
      <el-form :model="formData" label-width="100px" :rules="rules" ref="formRef">
        <el-form-item label="发货物流" prop="name">
          <el-input v-model="formData.name" placeholder="请输入发货物流" style="width: 80%" />
        </el-form-item>
        <el-form-item label="发货单号" prop="no">
          <el-input v-model="formData.no" placeholder="请输入发货单号" style="width: 80%" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">发货</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import EquityMallOrderAPI from "@/api/equitymall/order";
import { EQUITY_MALL_SHIPPING_STATUS_OBJECT } from "@/enums/EquityMallEnum";
const emit = defineEmits(["update:modelValue", "initList"]);
const dialog = reactive({
  title: "",
  visible: false,
});
const formData = reactive({
  name: "",
  no: "",
});
const rules = reactive({
  name: [{ required: true, message: "请输入发货物流", trigger: "blur" }],
  no: [{ required: true, message: "请输入发货单号", trigger: "blur" }],
});
const activeData = ref({});
const formRef = ref(null);
function handleSubmit() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log(formData, activeData.value);
      try {
        await EquityMallOrderAPI.changeProductShippingStatus({
          orderId: activeData.value.orderId,
          productId: activeData.value.productId,
          shippingStatus: EQUITY_MALL_SHIPPING_STATUS_OBJECT["已发货"],
          shippingExt: {
            name: formData.name,
            no: formData.no,
          },
        });
        ElMessage.success("发货成功");
        handleCloseDialog();
        emit("initList");
      } catch (error) {
        ElMessage.error("发货失败");
      }
    }
  });
}
// 关闭弹窗
function handleCloseDialog() {
  emit("update:modelValue", false); // 关闭弹窗
  formRef.value.resetFields();
  dialog.visible = false;
}
function showModal(data) {
  dialog.visible = true;
  activeData.value = data;
}
defineExpose({
  showModal,
});
</script>
<style style="scss" scoped>
.order-detail-container {
  padding: 10px 10px 30px;
}
.points-price {
  color: #f56c6c;
}
</style>
